<template>
    <div>
        <div class="detail">
            <div class="common-form">
                <!-- 轮播 -->
                <div style="width:100%;height:400px;margin-bottom:5% ;">
                    <!-- Using the slider component -->
                    <slider ref="slider" :options="options">
                        <!-- slideritem wrapped package with the components you need -->
                        <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
                        <!-- Customizable loading -->
                        <div slot="loading">loading...</div>
                    </slider>
                </div>
                <!-- <div class="detail-banner">
                    <div>
                        <img src="build/img/detail_1.jpg" >
                    </div>
                    <div class="detail-banner-dot">
                        <em></em>
                        <em class="detail-banner-dot-pink"></em>
                        <em></em>
                    </div>
                </div> -->
                <div class="detail-tel">
                    <p>
						<!-- <em class="vip-em">vip独享</em> -->
						{{VipDetail.goods_title}}</p>
                    <span><i></i>收藏</span>
                </div>
                <div class="detail-price">
                    <p>价格：￥{{VipDetail.market_price}}</p>
                    <p>会员价：￥<em>{{VipDetail.price}}</em></p>
                </div>
                <div class="detail-other">
                    <em>邮费：0.00</em>
                    <em>销量：{{VipDetail.has_sold}}</em>
                    <em>库存：{{VipDetail.inventory}}</em>
                </div>
            </div>
            <!-- 充值 -->
            <div class="vip-recharge">
                <a class="detail-recharge">
                    充值 充值会员  尊享3大权益<i>&gt;</i>
                </a>
            </div>
            <!-- 服务 -->
            <div class="common-form">
                <div class="detail-service">
                    <span><em></em>服务</span> 100%正品·品牌授权·48小时发货
                </div>
            </div>
            <!-- 公共标题 -->
            <div class="common-tel">
                用户评价
                <div class="common-tel-dot">
                    <em></em>
                    <em></em>
                    <em></em>
                </div>
                <a href="#">查看全部评价<i>&gt;</i></a>
            </div>
            <!-- 评价 
            <div class="common-form">
                <div class="detail-evaluate">
                    <div class="detail-evaluate-img">
                        <img src="build/img/1.jpg"/>
                    </div>
                    <div class="detail-evaluate-text">
                        <p>小丸子</p>
                        <p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>
                    </div>
                </div>
                <div class="detail-evaluate">
                    <div class="detail-evaluate-img">
                        <img src="build/img/2.jpg"/>
                    </div>
                    <div class="detail-evaluate-text">
                        <p>小丸子</p>
                        <p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>
                    </div>
                </div>
            </div>-->
            <!-- 店铺 -->
            <div class="common-form">
                <router-link :to="'/Shop/' + VipDetail.merchant_id" class="detail-shop">
                    <div class="detail-shop-img"><img src="build/img/1.jpg"/></div>
                    <div class="detail-shop-text">
                        <div class="detail-shop-text-tel">拾味居<a>进店逛逛</a></div>
                        <div class="detail-shop-text-other">
                            <span>商品描述  <em>4.98</em></span>
                            <span>卖家服务  <em>4.98</em></span>
                            <span>物流服务  <em>4.98</em></span>
                        </div>
                    </div>
                </router-link >
            </div>
            <!-- 公共标题 -->
            <div class="common-tel">
                用户评价
                <div class="common-tel-dot">
                    <em></em>
                    <em></em>
                    <em></em> 
                </div>
            </div>
            <!-- 商品简介 -->
            <div class="common-form">
                <div class="detail-info">	
                    {{VipDetail.content}}
                    <!-- <img src="build/img/detail_1.jpg" >
                    <img src="build/img/detail-2.jpg" >
                    <img src="build/img/detail-3.jpg" >
                    <img src="build/img/detail-4.jpg" > -->
                </div>
            </div>
            <div class="footer-100"></div>
            <!-- 详情底部 -->
            <div class="detail-footer">
                <a href="首页.html"><i></i><p>首页</p></a>
                <a href="客服.html"><i></i><p>客服</p></a>
                <a ><i></i><p>购物车</p></a>
                <a class="vip-btn" @click="seleceGg">vip立即购买</a>
            </div>
            <!-- 客服弹框 -->
            <div class="footer-standard" v-show="isShow3">
                <p>联系客服</p>

            </div>
            <!-- 选择规格 -->
            <div class="black" v-show="isShow" @click="black"></div>
            <div class="footer-standard" v-show="isShow2">
                <div class="footer-standard-shop">
                    <img :src="VipDetail.thumbnail" alt="" />
                    <div>
                        <p>￥<em>{{VipDetail.market_price}}</em></p>
                        <p><em>选择</em>：餐具套装（2人装），白色，1件</p>
                    </div>
                </div>
                <div class="footer-standard-num">
                    <p>{{VipDetail.spec_name1}}</p>
                    <div>
                        <!-- <em class="footer-standard-num-pink">餐具套装（2人装）</em> -->
                        <!-- <em v-for="(item,index) in attr" v-bind:class="{active:isActive}" @click="spec" class="teb">{{item.spec_1}}</em> -->
                        <em v-for="(item,index) in attr" :class="activeClass == index ? 'active':''" :key="index" @click="getItme(index,$event)">{{item.spec_1}}</em>
                    </div>
                </div>
                <div class="footer-standard-num">
                    <p>{{VipDetail.spec_name2}}</p> 
                    <div>
                        <!-- <em class="footer-standard-num-pink">白色</em> -->
                        <em  v-for="(item,index) in spec2" :class="activeClass2 == index ? 'active':''" :key="index" @click="getspec2(index,$event)">{{item.spec_2}}</em>
                    </div>
                </div>
                <div class="footer-standard-num">
                    <p>数量</p> 
                    <div class="goods-num">
                        <span class="sub" @click="sub">-</span>
                        <span class="num"><input type="text"  disabled="disabled" v-model="num"/></span>
                        <span class="add" @click="add">+</span>
                    </div>
                </div>
                <button class="detail-btn">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
import { slider, slideritem } from 'vue-concise-slider'
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'
    export default {
        name:'VipList',
        data () {
            return {
                isShow:false,
                isShow2:false,
                isShow3:false,
                activeClass: -1,
                activeClass2:-1,
                num:1,
                url:'http://huiwanzhong.ay1.cc',
                // 轮播
                someList:[
                    {
                        html: 'slide1',
                        style: {
                            'background': '#1bbc9b'
                        }
                    },
                    {
                        html: 'slide2',
                        style: {
                            'background': '#4bbfc3'
                        }
                    },
                    {
                        html: 'slide3',
                        style: {
                            'background': '#7baabe'
                        }
                    }
                ],
                //Slider configuration [obj]
                options: {
                    currentPage: 0
                },
                // 商品详情
                VipDetail:{
                    goods_title:'',//商品名称
                    price:'',//会员价
                    market_price:'',//市场价
                    inventory:'',//库存
                    content:'',//商品内容
                    spec_name1:'',//规格名称
                    spec_name2:'',//规格名称
                    thumbnail:'',//商品图片
                    has_sold:'',//已售数量
                    merchant_id:'',
                },
                attr:[],
                spec2:[],
            }
        },
        components: {
            slider,
            slideritem
        },
        methods:{
            switchTo(path){
                // console.log(this.$router)
                this.$router.push(path)
            },
            //商品详情
            detail:function(){
                console.log(this.$route.query.id)
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_type:0,
                    goods_id:1
                }
                that.$http.post('/vipmember/index/getShopInfo',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    // for (var i in res.data.data) {
                    res.data.list.thumbnail = this.url + res.data.list.thumbnail 
                    // }
                    this.VipDetail = res.data.list;
                    this.attr = res.data.attr
                }).catch(err=>{
                    console.log(err)
                })
            },
            //规格弹框
            seleceGg:function(){
                this.isShow = true;
                this.isShow2 = true 
            },
            //隐藏规格
            black:function(){
                this.isShow = false;
                this.isShow2 = false
            },
            //选规格
            getItme(index,e) {
                console.log(e.target.innerHTML)
                this.activeClass = index; 
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    // goods_type:0,
                    goods_id:1,
                    spec_1:e.target.innerHTML
                }
                that.$http.post('/index/merchant/goods/attrDetails',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    this.spec2 = res.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            //子规格
            getspec2:function(index,e){
                console.log(e.target.innerHTML)
                this.activeClass2 = index; 
            },
            //添加商品数量
            add:function(){
                this.num ++
            },
            //减少商品
            sub:function(){
                if(this.num == 0){
                    this.num == 0
                }else{
                    this.num --
                }
            },
        },
        mounted(){
            this.detail();
        }
    }
</script>

<style scoped>
.black{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9;
	/* display: none; */
}
.vip-btn{
	background: #DFB87D !important;
}
.vip-em{
    width: 76px;
    height: 26px;
    line-height: 26px;
    border-radius: 5px;
    background-color: rgba(223, 184, 125, 1);
    text-align: center;
    color: #FFF;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
}
.vip-recharge{
	width:94%;
	margin:0 auto;
	height: 38px;
	line-height: 38px;
	border-radius: 5px;
	background-color: rgba(252, 40, 71, 1);
	margin-top:10px;
}
.vip-recharge a{
	color:#FFF;
	font-weight: 600;
	padding: 0 10px
}
.vip-recharge i{
	color: #FFF;
    float: right;
    padding: 0 8px;
    font-size: 14px;
}
.detail-footer a:nth-child(1),.team-footer a:nth-child(1){
	width:15%;
	float: left;
	text-align: center;
}
.detail-footer a:nth-child(1) i,.team-footer a:nth-child(1) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/index.png)  no-repeat;
    background-size:100%;
    margin-top:5px;
}
.detail-footer a:nth-child(2) i,.team-footer a:nth-child(2) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/kefu.png)  no-repeat;
    background-size:100%;
    margin-top:5px;
}
.detail-footer a:nth-child(2),.team-footer a:nth-child(2){
	width:15%;
	float: left;
	text-align: center;
}
.detail-footer a:nth-child(3) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/shop.png)  no-repeat;
    background-size:100%;
    margin-top:5px;
}
.detail-footer a:nth-child(3){
	width:15%;
	float: left;
    text-align: center;
    background: #EBEBEB; 
    color: #333;
    height: auto;
    line-height: 20px;
    height: auto;

}
.detail-footer a:nth-child(4){
	width:55%;
	float: left;
	background: #FE2746 ;
	color:#FFF;
	text-align: center;
	height: 48px;
	line-height: 48px;
	height:48px;
	color:#FFF;
}




</style>